import defaltImg from '@/assets/images/200.png'
// 引入监听是否进入视口
import { useIntersectionObserver } from '@vueuse/core'
const plugin = {
  install (app) {
    // 插件逻辑
    // console.log(app)
    // app:component / derective
    app.directive('img-lazy', {
      mounted (el, binding) {
        // console.log(el, binding.value)
        // el: 指的是img的Dom 对象
        // binding.value: 指的是图片的地址
        // 该有的参数都有了 实现具体逻辑就可以了
        // 核心思路 : 进入到史口区域 的图片 才正式加载
        // 技术方案: 1.如何监控图片进入到了视口区域 2.如何让图片发正式请求
        // 解决方案: 1.vue.use解决监听图片进入视口区域的问题
        // 2.给img.src = "url"
        // ---实现监听
        const { stop } = useIntersectionObserver(el,
          ([{ isIntersecting }], observerElement) => {
            // isIntersecting:进入true 出去就是false
            // console.log(isIntersecting)
            if (isIntersecting) {
              // 当图片url无效加载失败的时候使用默认图片替代
              el.onerror = function () {
                el.src = defaltImg
              }
              el.src = binding.value
              // 完成首次加载之后 停止监听
              stop()
            }
          },
          // 被监听的元素到底进入到多大面积才开始执行回调
          // 0-1 值 越小  要求的面积就越小
          { threshold: 0 }
        )
      }
    })
  }
}

export default plugin
